<template>
    <div id="sidebar" class="">
    <aside class="fixed w-64 bg-white dark:bg-gray-800 h-screen p-4 border-r border-gray-200 dark:border-gray-700">
        <div class="mb-8">
            <h3 class="text-gray-700 dark:text-gray-300 font-semibold mb-3">Private</h3>
            <ul class="space-y-2">
                <li v-for="(category, index) in categories" :key="index"
                    class="px-3 py-2 rounded-md transition-colors hover:bg-gray-100 dark:hover:bg-gray-700 cursor-pointer"
                    @click="selectCategory(category)">
                    <span class="text-gray-600 dark:text-gray-300">{{ category.name }}</span>
                    <span class="text-sm text-gray-400 ml-2">({{ category.count }})</span>
                </li>
            </ul>
        </div>

        <div>
            <h3 class="text-gray-700 dark:text-gray-300 font-semibold mb-3">Target</h3>
            <div class="flex flex-wrap gap-2">
                <span v-for="(tag, index) in tags" :key="index"
                    class="px-2 py-1 text-sm bg-blue-100 dark:bg-blue-900 text-blue-800 dark:text-blue-200 rounded-full cursor-pointer hover:bg-blue-200 dark:hover:bg-blue-800 transition-colors"
                    @click="selectTag(tag)">
                    {{ tag.name }}
                </span>
            </div>
        </div>
        
    </aside>
</div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { useThemeStore } from '@/store/theme'

const themeStore = useThemeStore()

// 模拟数据
const categories = ref([
    { name: '三月七', count: 12 },
    { name: '流萤', count: 8 },
    { name: '昔涟', count: 5 },
    { name:'遐蝶',count:2}
])

const tags = ref([
    {name:'夏日小蛋糕原创',count:18},
    { name: '注意：所有常驻角色和四星角色默认满魂，光锥默认最佳，限定光锥叠一', count: 15 },
    { name: '个人开发网站，不对外', count: 22 },
    { name: '仅供娱乐', count: 18 },
    { name: '多功能个人博客', count: 10 },
    { name: '最后的自由', count: 20 }
])

const selectCategory = (category: any) => {
    console.log('Selected category:', category)
}

const selectTag = (tag: any) => {
    console.log('Selected tag:', tag)
}
</script>

<style scoped>
aside {
    transition: background-color 0.3s ease;
}
</style>